<template>
	<view>
		<view class="top">
			<view class="topBtn" :class="{'topBtnActive':tabType == 2}" @click="changeTab(2)">关注</view>
			<view class="topBtn" :class="{'topBtnActive':tabType == 1}" @click="changeTab(1)">粉丝</view>
		</view>
		<view class="none" v-if="isPage">没有内容</view>
		<view class="list" v-else>
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="item-left">
					<view class="item-left-image" @click="gotoHomePage(item.user_id)">
						<headimg :realSrc="item.avatar"></headimg>
					</view>
					<view class="item-left-info">
						<view class="item-left-name">{{item.nicheng ? item.nicheng : '未设置昵称'}}</view>
						<text class="item-left-txt">{{item.signature ? item.signature :'这个人很懒，什么都没有留下'}}</text>
					</view>
				</view>
				<view class="item-state_cancle" v-if="tabType == 2 && item.user_id != userId && !formId"
					@tap="follow(1,item.user_id,index)">取消关注</view>
				<view v-if="tabType == 2 && item.user_id != userId && formId">
					<view class="item-state_cancle"
						v-if="item.form_is_mutual_follow == 1 || item.form_is_mutual_follow == 0"
						@tap="follow(1,item.user_id)">取消关注</view>
					<view class="item-state" v-else @tap="follow(0,item.user_id)">关注</view>
				</view>
				<view v-if="tabType == 1 && item.user_id != userId && !formId">
					<view class="item-state_cancle" v-if="item.is_mutual_follow == 1" @tap="follow(1,item.user_id)">取消关注
					</view>
					<view class="item-state" v-else @tap="follow(0,item.user_id)">关注</view>
				</view>
				<view v-if="tabType == 1 && item.user_id != userId && formId">
					<view class="item-state_cancle"
						v-if="item.form_is_mutual_follow == 1 || item.form_is_mutual_follow == 0"
						@tap="follow(1,item.user_id)">取消关注</view>
					<view class="item-state" v-else @tap="follow(0,item.user_id)">关注</view>
				</view>
			</view>
			<uni-load-more v-if="list.length >= 10" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	import headimg from '@/components/head_img.vue';
	export default {
		components: {
			uniPopupDialog,
			headimg
		},
		data() {
			return {
				userId: uni.getStorageSync('userInfo').id,
				formId: '',
				sexTxt: '他', //性别
				tabType: 1, //类型
				page: 1,
				reload: true,
				isPage: false, //是否为空列表
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				list: []
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.reload = true;
			this.isPage = false;
			this.list = [];
			this.getList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getList();
			}, 500);
		},
		onLoad(option) {
			if (option.userId && option.userId != this.userId) {
				this.formId = option.userId;
			}
			if (option.sex == 2) {
				this.sexTxt = '她';
			}
			this.tabType = option.type;
			this.changeTab();
		},
		methods: {
			/* 列表 */
			getList() {
				let resData = {
					page: this.page,
					pagesize: 12
				}
				if (this.formId) {
					resData.form_id = this.formId
				}
				var url = 'user/video.User/UserFandList';
				if (this.tabType == 2) {
					url = 'user/video.User/UserFollowList';
				}
				this.$api.apiPost(url, resData).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.data;
						this.list = this.reload ? list : this.list.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.list = [];
							this.isPage = true;
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			// 切换选项卡
			changeTab(type) {
				if (type) {
					this.tabType = type;
				}
				this.page = 1;
				this.reload = true;
				this.isPage = false;
				this.list = [];
				this.getList();
				if (this.tabType == 1) {
					uni.setNavigationBarTitle({
						title: '喜欢' + this.sexTxt
					})
				} else {
					uni.setNavigationBarTitle({
						title: this.sexTxt + '喜欢'
					})
				}
			},
			/* 关注 & 取消关注 */
			follow(type, user_id, index) {
				var url = ''
				let is_mutual_follow = '';
				if (type == 0) {
					url = 'user/video.User/UserFollowAdd'
					is_mutual_follow=1;
				} else if (type == 1) {
					url = 'user/video.User/UserFollowDel'
					is_mutual_follow=null;
				}
				
				this.$api.apiPost(url, {
					form_id: user_id
				}).then(res => {
					var chatuserlist=uni.getStorageSync('chatuserlist');
					var toid = JSON.stringify(Number(user_id));
					if(chatuserlist){
						if (chatuserlist[toid]) {
							chatuserlist[toid]['is_mutual_follow'] = is_mutual_follow;
							uni.setStorageSync('chatuserlist', chatuserlist);
						}
					}
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					if (index) {
						this.list.splice(index, 1);
					} else {
						this.changeTab();
					}
				})
			},
			// 前往个人主页
			gotoHomePage(user_id) {
				uni.navigateTo({
					url: '/pages/school/my-center?user_id=' + user_id
				})
			}
		}
	}
</script>

<style scoped>
	.top {
		position: fixed;
		left: 0;
		width: 100%;
		height: 88upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-bottom: 2upx solid #DCDFE6;
		/* #ifdef H5 */
		top: 88upx;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
	}

	.topBtn {
		font-size: 30upx;
		color: #333333;
		width: 50%;
		line-height: 90upx;
		text-align: center;
	}

	.topBtnActive {
		position: relative;
	}

	.topBtnActive:after {
		content: '';
		background: #00D5A2;
		height: 8upx;
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.none {
		color: #333333;
		font-size: 30upx;
		margin-top: 500upx;
		width: 100%;
		text-align: center;
	}

	.list {
		padding: 90upx 30upx;
		width: calc(100% - 60upx);
	}

	.item {
		height: 170upx;
		border-bottom: 2upx solid #DCDFE6;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.item-left {
		display: flex;
		align-items: center;
		width: 75%;
	}

	.item-left-image {
		width: 88upx;
		height: 88upx;
		margin-right: 30upx;
	}

	.item-left-info {
		width: calc(100% - 118upx);
	}

	.item-left-name {
		color: #333333;
		font-size: 30upx;
		margin-bottom: 12upx;
	}

	.item-left-txt {
		color: #999999;
		font-size: 26upx;
	}

	.item-right {}

	.item-state {
		color: #FFFFFF;
		background: #00D5A2;
		font-size: 26upx;
		white-space: nowrap;
		padding: 12upx 24upx;
		border-radius: 10upx;
	}

	.item-state_cancle {
		color: #FFFFFF;
		background: #C0C4CC;
		font-size: 26upx;
		white-space: nowrap;
		padding: 12upx 24upx;
		border-radius: 10upx;
	}
</style>
